<template>
  <button @click="submit"
  >提交数据</button>
  <div class="drag-box">

    <Draggable
      :list="list"
      :animation="100"
      item-key="id"
      @change="onMoveCallback"
    >
      <template #item="{ element }">
        <div class="items">
          <div class="title">{{ element.label }}</div>
        </div>
      </template>
    </Draggable>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import Draggable from 'vuedraggable'
const list = reactive([
  {
    label: '模块1',
    id: 1
  },
  {
    label: '模块2',
    id: 2

  },
  {
    label: '模块3',
    id: 3

  },
  {
    label: '模块4',
    id: 4

  },
  {
    label: '模块5',
    id: 5

  },
  {
    label: '模块6',
    id: 6

  }
])
const onMoveCallback = () => {
  list.forEach(item => {
    console.log(item.label)
  })
}
// 查看最新的数据
const submit = () => {
  console.log(list)
}
</script>
<style lang="less" scoped>
.drag-box .items {
  display: flex;
  justify-content: space-between;
  width: 80%;
  padding: 5px;
  margin-bottom: 5px;
  background: #e3e3e3;
  border-radius: 8px;
}
</style>
